<script setup>
import { ref, reactive ,toRaw} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { post, get } from '../../utils/request'
import {showToast}from 'vant'
const route=useRoute()
const router=useRouter()
// 返回上一页
const onBack = () => {
  history.back()
}

// 表单数据 - 保持响应式对象
const form = reactive({
  username: route.query.username,
  name: '',
  sex: '',
  birth: '',
})

// 控制弹窗显示
const showGenderPicker = ref(false)
const showDatePicker = ref(false)

// 头像地址
const img = ref('')

// 性别选项
const genderOptions = [{ name: '男' }, { name: '女' }]

// 性别选中
const onGenderSelect = (item) => {
  form.sex = item.name
  showGenderPicker.value = false
}

// 日期选中
const onDateConfirm = ({ selectedValues }) => {
  form.birth = selectedValues.join('-')
  showDatePicker.value = false
}

// 上传后处理逻辑
const onAfterRead = async (file) => {
  const formdata = new FormData()
  formdata.append('img', file.file)
  
  try {
    const res = await post('/wyq/upload', formdata, {})
    img.value = res.data.path 
  } catch (err) {
    console.log(err, 'err')
  }
  
  console.log('上传头像文件', file)
}

// 提交表单
const chguser = async() => {
  console.log('提交表单：', form)
  const img1=img.value
  let res=await post('/wyq/chguser',{...toRaw(form),img:img1})
  if(res.data.code==200){
    showToast({
      message:res.data.msg,
      onClose:()=>{
        router.push(`/zhifu?username=${form.username}`)
      }
    })
  }
}
</script>

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="填写资料" left-arrow @click-left="onBack" />

  <!-- 内容区域 -->
  <div class="form-container">
    <!-- 自定义头像区域 -->
    <div class="avatar-wrapper">
      <div class="avatar-circle">
        <img v-if="img" :src="img" alt="头像" class="avatar-image" style="width: 120px;height:120px;border-radius: 50%;"/>
        <van-icon v-else name="photo" class="avatar-icon" />
      </div>
      <van-uploader :after-read="onAfterRead" accept="image/*" max-count="1" class="edit-button">
        <div class="edit-icon-circle">
          <van-icon name="edit" color="#fff" size="24" style="color: white" />
        </div>
      </van-uploader>
    </div>

    <!-- 表单区域 -->
    <van-cell-group inset>
      <!-- 用户名只读 -->
      <van-field v-model="form.username" placeholder="buyer512386" readonly />
      <!-- 昵称输入 -->
      <van-field v-model="form.name" placeholder="昵称" />
      <!-- 性别选择 -->
      <van-field
        v-model="form.sex"
        placeholder="性别"
        is-link
        readonly
        @click="showGenderPicker = true"
      />
      <!-- 出生日期选择 -->
      <van-field
        v-model="form.birth"
        placeholder="出生日期"
        is-link
        readonly
        @click="showDatePicker = true"
      />
    </van-cell-group>
    
    <!-- {{ form.birth + form.sex }} -->
  </div>

  <!-- 固定底部按钮 -->
  <div class="footer">
    <van-button :style="{ backgroundColor: 'black' }" type="primary" block @click="chguser">
      继续
    </van-button>
  </div>

  <!-- 性别选择弹出 -->
  <van-action-sheet
    v-model:show="showGenderPicker"
    :actions="genderOptions"
    @select="onGenderSelect"
    cancel-text="取消"
  />

  <!-- 生日选择弹出 -->
  <van-popup v-model:show="showDatePicker" position="bottom">
    <van-date-picker
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
      :min-date="new Date(1925, 0, 1)"
      :max-date="new Date()"
    />
  </van-popup>
</template>



<style scoped>
/* 页面整体布局 */
.form-container {
  padding: 24px;
  padding-bottom: 80px; /* 留出按钮空间 */
  min-height: calc(100vh - 46px); /* 46 是 NavBar 高度 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 头像容器 */
.avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 24px auto;
}

/* 圆形背景 + 图标 */
.avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f7f8fa;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  box-sizing: border-box;
}

/* 默认头像图标样式 */
.avatar-icon {
  font-size: 36px;
  color: #ccc;
}

/* 编辑图标按钮 */
.edit-button {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 50%;
  overflow: visible;
  padding: 0;
  border: none;
  /* color:black; */
}
.edit-icon-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: black; /* Vant 默认 primary 蓝 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-uploader__input {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  position: static !important;
}

/* 底部提交按钮区域 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 24px 24px;
  background: #fff;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.uploader-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border: none;
}
</style>
